<template>
	<div ref="bigViewerRef" id="big-viewerRef"></div>
</template>

<script setup>
import { Viewer } from '@photo-sphere-viewer/core';
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
import { EquirectangularTilesAdapter } from '@photo-sphere-viewer/equirectangular-tiles-adapter';
import { VisibleRangePlugin } from '@photo-sphere-viewer/visible-range-plugin';
import { AutorotatePlugin } from '@photo-sphere-viewer/autorotate-plugin';
import '@photo-sphere-viewer/core/index.css';
import '@photo-sphere-viewer/markers-plugin/index.css';
import '@photo-sphere-viewer/gallery-plugin/index.css';
import { ref, onMounted, reactive, toRefs, defineProps, defineEmits, watch } from 'vue';
import { listQjPoi } from './service';

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
const bigViewerRef = ref(null);
//全景图viewer

let viewer = null;
//全景图视角配置
let animatedValues = {
	pitch: { start: -Math.PI / 2, end: 0 },
	yaw: { start: Math.PI / 2, end: 0 },
	zoom: { start: 0, end: 10 },

	fisheye: { start: 2, end: 0 }
};
//全景图像上添加标记(markers)或热点(hotspots)插件
let markersPlugin = null;
//自动旋转功能插件
//创建全景图像的画廊插件
//限制显示范围插件
const emit = defineEmits(['selectMarker', 'changetooOften']);
const props = defineProps({
	url: {
		type: String
	},
	id: {
		type: Number
	}
});
watch(
	() => props.url,
	newValue => {
		if (newValue) {
			initViewer(newValue);
			handleSelectMarker();
		}
	},
	{ immediate: true, deep: true }
);
onMounted(() => {});
/**
 * @description: 全景图的基础配置
 * @param {*} params
 * @return {*}
 */
function initViewer(url) {
	viewer = new Viewer({
		container: bigViewerRef.value,
		caption: '党建全景图',
		loadingImg: baseUrl + 'loader.gif',
		mousewheelCtrlKey: false, // 是否需要使用ctrl键缩放全景
		defaultPitch: animatedValues.pitch.start, //默认垂直视角（俯仰角）
		defaultYaw: animatedValues.yaw.start, //默认水平视角（偏航角）
		fisheye: animatedValues.fisheye.start, //实现鱼眼效果
		minFov: 10,
		maxFov: 80,
		escription: '<div >hello,nihao </div>',
		navbar: false,
		containerStyle: {
			// 设置 image-rendering 属性
			imageRendering: 'pixelated'
		},

		adapter: EquirectangularTilesAdapter,
		panorama: {
			width: 20000,
			cols: 32,
			rows: 16,
			//baseUrl: url,
			tileUrl: (col, row) => {
				return `${url.substring(0, url.lastIndexOf('.'))}_${row}_${col}.jpg`;
			}
		},
		plugins: [
			[
				MarkersPlugin,
				{
					markers: []
				}
			],
			[
				AutorotatePlugin,
				{
					autostartDelay: 3000,
					autorotatePitch: '-20deg',
					autostartOnIdle: true,
					autorotateSpeed: '1rpm'
				}
			],
			[
				VisibleRangePlugin,
				{
					verticalRange: [-Math.PI / 2, Math.PI / 50]
				}
			]
		]
	});

	//获取已经添加到查看器实例中的插件
	markersPlugin = viewer.getPlugin(MarkersPlugin);
	//全景图像查看器准备好并可用时触发回调函数
	viewer.addEventListener('ready', handleViewerReady, {
		once: true
	});
}

/**
 * @description: 全景图视图初始化
 * @return {*}
 */
function handleViewerReady() {
	getMarkerList();
	//	autorotatePlugin.setKeypoints(markers1);
	//showInitMarker();
}

/**
 * @description:
 * @return {*}
 */
function showInitMarker() {
	//用于显示所有已添加标记的工具提示
	setTimeout(() => {
		markersPlugin.showAllTooltips();
	}, 0);
}

/**
 * @description: 选择标记事件
 * @return {*}
 */
function handleSelectMarker() {
	markersPlugin.addEventListener('select-marker', ({ marker }) => {
		emit('selectMarker', marker);
	});
}

function getMarkerList() {
	listQjPoi({
		pageNum: 1,
		pageSize: 10,
		cunzhenId: props.id
	}).then(res => {
		initMarkers(res.rows);
	});
}
/**
 * @description: 点位数据初始化
 * @return {*}
 */
function initMarkers(markerList) {
	markerList &&
		markerList.forEach(item => {
			let { x, y } = JSON.parse(item.location);
			let marker = {
				id: item.id,
				position: {
					yaw: x,
					pitch: y
				},
				image: item.picType,
				size: {
					width: 40,
					height: 40
				},
				anchor: 'bottom center',
				tooltip: {
					content: item.name,
					className: 'bigTooltip',
					position: 'bottom',
					trigger: 'click'
				}
			};
			markersPlugin.addMarker(marker);
		});
	showInitMarker();
}
</script>

<style lang="scss">
.psv-gallery {
	background: none;
	border: none;
	z-index: 88;
	pointer-events: none;
}

.psv-gallery-container {
	justify-content: center;
}

.psv-gallery.psv-gallery--open {
	transform: translateY(-20px) !important;
}

.psv-gallery-item {
	pointer-events: auto;
}

.psv-gallery-item::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 3px solid white;
	z-index: 3;
}

.psv-gallery-item--active::after {
	/*  rgb(246, 166, 0) */
	border-color: rgb(246, 166, 0);
}

.psv-gallery-item-title {
	bottom: 0;
	top: auto;
	font-size: 12px;
}

.psv-gallery-item:hover .psv-gallery-item-title {
	height: 2.2em;
}

.bigTooltip {
}
</style>
